<template>
	<a-trigger
		v-model:popup-visible="popupVisible"
		position="tr"
		auto-fit-position
		:unmount-on-close="false"
		trigger="click"
		show-arrow
		arrow-class="customPopConfirmArrow"
		:popup-translate="[32, -10]"
	>
		<slot></slot>
		<template #content>
			<div class="customPopConfirm">
				<div class="title">{{ props.title }}</div>
				<div class="content">{{ props.content }}</div>
				<a-space class="handle" fill>
					<a-button size="mini" @click="onCancelClick">{{ props.cancelText }}</a-button>
					<a-button size="mini" type="primary" :status="okStatus" @click="onOkClick">{{
						props.okText
					}}</a-button>
				</a-space>
			</div>
		</template>
	</a-trigger>
</template>
<script setup>
import { inject, ref, watch } from 'vue';

const props = defineProps({
	title: {
		type: String,
		required: true,
	},
	content: {
		type: String,
		required: true,
	},
	cancelText: {
		type: String,
		default: '取消',
	},
	okStatus: {
		type: String,
		default: ''
	},
	okText: {
		type: String,
		default: '删除',
	},
});
const emit = defineEmits(['ok', 'cancel', 'visibleChange']);

const popupVisible = ref(false);
watch(
	() => popupVisible.value,
	() => {
		emit('visibleChange', popupVisible.value);
	}
);
const toggleTableHandle = inject('toggleTableHandle', () => {});

const onCancelClick = () => {
	popupVisible.value = false;
	toggleTableHandle();
	emit('cancel');
};
const onOkClick = () => {
	popupVisible.value = false;
	toggleTableHandle();
	emit('ok');
};
</script>
<style lang="less">
.customPopConfirm {
	box-sizing: border-box;
	width: 267px;
	padding: 16px;
	background: rgba(255, 255, 255, 1);
	border: 1px solid rgba(229, 230, 235, 1);
	border-radius: 4px;
	box-shadow: 0 4px 10px #0000001a;
	.title {
		color: rgba(29, 33, 41, 1);
		font-size: 14px;
		line-height: 22px;
		font-weight: bold;
	}
	.content {
		margin-top: 4px;
		color: rgba(134, 144, 156, 1);
		font-size: 14px;
		line-height: 22px;
		font-weight: 400;
	}
	.handle {
		margin-top: 16px;
		justify-content: flex-end;
	}
}
.customPopConfirmArrow {
	z-index: 3;
	border: 1px solid rgba(229, 230, 235, 1);
}
</style>
